<!DOCTYPE html>
<html>
<head>
  <title>Vue 2 Toggle Text Example</title>
</head>
<body>
  <div id="app">
    <h2>{{ displayedText }}</h2>
    <button @click="toggleText">逆转世界</button>
  </div>
  <script src="../vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        originalText: 'Hello, World!',
        isTextReversed: false
      },
      computed: {
        displayedText: function() {
          return this.isTextReversed ? this.reverseText(this.originalText) : this.originalText;
        }
      },
      methods: {
        toggleText: function() {
          this.isTextReversed = !this.isTextReversed;
        },
        reverseText: function(text) {
          return text.split('').reverse().join('');
        }
      }
    });
  </script>
</body>
</html>
